<template>
  <div class="departments-container" v-loading="loading">
    <el-card class="tree-card">
      <!-- 用了一个行列布局 -->
      <!-- 第一行 -->
      <dep-tool
        :treeNode="company"
        :isRoot="true"
        @addDepts="addDepList"
      ></dep-tool>
      <el-divider></el-divider>
      <el-tree :data="data" node-key="id">
        <dep-tool
          :treeNode="data"
          :node="node"
          slot-scope="{ node, data }"
          @delDepts="getDepList"
          @addDepts="addDepList"
          @editDepts="editDepts"
        ></dep-tool>
      </el-tree>
      <add-dept
        ref="addDept"
        :showAddDialog.sync="showAddDialog"
        @addDepts="getDepList"
        :pid="currentId"
        :code="currentCode"
      ></add-dept>
    </el-card>
  </div>
</template>

<script>
import depTool from "./compoment/dep-tool";
import addDept from "./compoment/add-dept.vue";
import { getDepartments } from "@/api/departments";
import { tranListToTreeData } from "@/utils/index";
export default {
  name: "departments",
  components: { depTool, addDept },
  data() {
    return {
      currentId: "",
      currentCode: "",
      loading: false,
      showAddDialog: false,
      company: {
        name: "深圳陈聋娱乐股份有限公司",
        manager: "负责人",
        id: "",
      },
      data: [],
    };
  },
  created() {
    this.getDepList();
  },
  methods: {
    async getDepList() {
      this.loading = true;
      let res = await getDepartments();
      // 根节点
      this.company.name = res.data.companyName;

      this.data = tranListToTreeData(res.data.depts, "");
      this.loading = false;
    },
    addDepList(currentNode) {
      this.showAddDialog = true;
      this.currentId = currentNode.id;
      this.currentCode = currentNode.code;
    },
    async editDepts(currentNode) {
      this.$refs.addDept.getDeptDetail(currentNode.id);
      this.showAddDialog = true;
    },
  },
};
</script>

<style lang='scss' scoped>
.tree-card {
  margin: 20px;
  padding: 30px 140px;
  font-size: 14px;
  .company-name {
    font-weight: 600;
  }
}
</style>